﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Movie Details</title>

    <link rel="shortcut icon" href="../images/favicon.jpg"/>
    <!-- Bootstrap -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <!--自己的css文件-->
    <link rel="stylesheet" href="../css/index.css"/>
    <!--<link rel="stylesheet" href="../css/movie.css"/>-->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="../js/html5shiv.min.js"></script>
    <script src="../js/respond.js"></script>
    <![endif]-->

    <style>
        .movieDetail{
            margin-top: 50px;
        }
        #movieImg{
            float: left;
            vertical-align: middle;
            padding:0 20px;
        }
        #contents{
           text-indent: 2em;
            width: 80%;
            color: #000000;
        }

        @media screen and (max-width: 768px) {
            #movieImg{
                width: 200px;
            }
            #contents{
                /*width: 200px;*/
            }
        }
        body{
            background-image: none;
            margin: 0;
            padding:0;
        }
        #goHome{
            width: 100px;
            height: 40px;
            background-color: lightgreen;
            display: block;
            text-align: center;
            line-height: 40px;
            color: #FFFFFF;
            border-radius: 5px;
            position: absolute;
            left: 20px;
            top:0;
        }

        #goHome:hover{
            text-decoration: none;
        }
    </style>
</head>
<body>
<a href="../index2.html" id="goHome">返回首页</a>

<!--电影详细内容-->
<div class="movieDetail">
    <img src="" alt="" id="movieImg"/>
    <div id="contents">
        <h3 id="title"></h3>
        <p id="avatars"></p>
        <p id="summary"></p>
    </div>
</div>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../js/jquery-1.12.2.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/bootstrap.min.js"></script>
<!--<script src="../js/index.js"></script>-->
<script src="../js/movieDetail.js"></script>
<script src="../js/wow.js"></script>
<!--<script src="../js/movie.js"></script>-->
<!--<script type="text/javascript" class="autoinsert" src="js/jquery-1.2.6.min.js"></script>-->
<!--<script src="../js/snowfall.jquery.js"></script>-->

<script>
    if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
        new WOW().init();
    }
    ;
</script>

</body>
</html>